﻿@{
    ViewBag.Title = "Examples";
}

<div class="page-header">
    <h1>@ViewBag.Title</h1>
</div>

<p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
<ul class="thumbnails">
    <li class="span3">
        <a class="thumbnail" href="http://twitter.github.io/bootstrap/examples/starter-template.html" target="_blank">
            <img src="http://twitter.github.io/bootstrap/assets/img/examples/bootstrap-example-starter.png" alt="">
        </a>
        <h4>Starter template</h4>
        <p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
    </li>
    <li class="span3">
        <a class="thumbnail" href="http://twitter.github.io/bootstrap/examples/hero.html" target="_blank">
            <img src="http://twitter.github.io/bootstrap/assets/img/examples/bootstrap-example-marketing.png" alt="">
        </a>
        <h4>Basic marketing site</h4>
        <p>Featuring a hero unit for a primary message and three supporting elements.</p>
    </li>
    <li class="span3">
        <a class="thumbnail" href="http://twitter.github.io/bootstrap/examples/fluid.html" target="_blank">
            <img src="http://twitter.github.io/bootstrap/assets/img/examples/bootstrap-example-fluid.png" alt="">
        </a>
        <h4>Fluid layout</h4>
        <p>Uses our new responsive, fluid grid system to create a seamless liquid layout.</p>
    </li>

    <li class="span3">
        <a class="thumbnail" href="http://twitter.github.io/bootstrap/examples/marketing-narrow.html" target="_blank">
            <img src="http://twitter.github.io/bootstrap/assets/img/examples/bootstrap-example-marketing-narrow.png" alt="">
        </a>
        <h4>Narrow marketing</h4>
        <p>Slim, lightweight marketing template for small projects or teams.</p>
    </li>
    <li class="span3">
        <a class="thumbnail" href="http://twitter.github.io/bootstrap/examples/justified-nav.html" target="_blank">
            <img src="http://twitter.github.io/bootstrap/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
        </a>
        <h4>Justified nav</h4>
        <p>Marketing page with equal-width navigation links in a modified navbar.</p>
    </li>
    <li class="span3">
        <a class="thumbnail" href="http://twitter.github.io/bootstrap/examples/signin.html" target="_blank">
            <img src="http://twitter.github.io/bootstrap/assets/img/examples/bootstrap-example-signin.png" alt="">
        </a>
        <h4>Sign in</h4>
        <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
    </li>

    <li class="span3">
        <a class="thumbnail" href="http://twitter.github.io/bootstrap/examples/sticky-footer.html" target="_blank">
            <img src="http://twitter.github.io/bootstrap/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
        </a>
        <h4>Sticky footer</h4>
        <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
    </li>
    <li class="span3">
        <a class="thumbnail" href="http://twitter.github.io/bootstrap/examples/carousel.html" target="_blank">
            <img src="http://twitter.github.io/bootstrap/assets/img/examples/bootstrap-example-carousel.png" alt="">
        </a>
        <h4>Carousel jumbotron</h4>
        <p>A more interactive riff on the basic marketing site featuring a prominent carousel.</p>
    </li>
</ul>
